<template>
  <div class="app-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button icon="Back" @click="goBack">返回</el-button>
        <span class="page-title">发布</span>
      </div>
      <div class="header-right">
        <span class="user-info">信息发布</span>
      </div>
    </div>

    <!-- 发布表单 -->
    <div class="publish-content" v-loading="loading">
      <el-card class="publish-card">
        <el-form ref="publishFormRef" :model="form" :rules="rules" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入标题" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发布者" prop="publisher">
                <el-input v-model="form.publisher" placeholder="请输入发布者" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="发布时间" prop="time">
                <el-date-picker
                  v-model="form.time"
                  type="date"
                  placeholder="选择发布时间"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="咨询电话" prop="telephone">
                <el-input v-model="form.telephone" placeholder="请输入咨询电话" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="预览图">
            <image-upload v-model="form.img" :limit="1" :file-size="2" />
          </el-form-item>
          
          <el-form-item label="发布内容" prop="content">
            <editor v-model="form.content" :min-height="300" placeholder="请输入发布内容"/>
          </el-form-item>
          
          <el-form-item label="审核状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio :label="0">待审核</el-radio>
              <el-radio :label="1">上架</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        
        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button type="info" icon="Close" @click="goBack">取消</el-button>
          <el-button type="primary" icon="Check" @click="handlePublish">发布</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup name="PurchasePublish">
import { addPurchase } from "@/api/system/purchase"
import { useRouter } from 'vue-router'
import ImageUpload from "@/components/ImageUpload/index.vue"

const router = useRouter()
const { proxy } = getCurrentInstance()

const loading = ref(false)
const form = ref({
  title: '',
  content: '',
  img: '',
  publisher: '平台',
  time: new Date().toISOString().split('T')[0],
  telephone: '',
  status: 0
})

const rules = {
  title: [
    { required: true, message: '请输入标题', trigger: 'blur' }
  ],
  publisher: [
    { required: true, message: '请输入发布者', trigger: 'blur' }
  ],
  time: [
    { required: true, message: '请选择发布时间', trigger: 'change' }
  ],
  telephone: [
    { required: true, message: '请输入咨询电话', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入发布内容', trigger: 'blur' }
  ],
  status: [
    { required: true, message: '请选择审核状态', trigger: 'change' }
  ]
}



/** 发布信息 */
function handlePublish() {
  proxy.$refs["publishFormRef"].validate(valid => {
    if (valid) {
      loading.value = true
      addPurchase(form.value).then(response => {
        proxy.$modal.msgSuccess("发布成功")
        goBack()
      }).catch(() => {
        loading.value = false
        proxy.$modal.msgError("发布失败")
      })
    }
  })
}

/** 返回上一页 */
function goBack() {
  router.go(-1)
}
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-info {
  color: #606266;
  font-size: 14px;
}

.publish-content {
  padding: 0 20px;
}

.publish-card {
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}
</style> 